<template>
    <div>
        <!-- 票价管理-自定义公式 -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="addWin=true">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="mod">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                        </el-col>
                    </el-row>
                  </div>
                    <!-- 表格数据 -->
                    <el-row>
                        <el-col :span="24">
                            <avue-crud :data="customList[0].data" :option="customList[0].option" @current-row-change="rowChange"  @current-change="customPage" :page="customList[0].page"></avue-crud>
                        </el-col>
                    </el-row>
                    <!-- 弹窗栏 -->
                    <!-- 添加弹窗 -->
                    <div class="modal-win" v-show="addWin">
                      <div class="add-container">
                          <div class="closeWin" @click="addWin=false">X</div>
                          <!-- 标题栏 -->
                          <el-row class="add-title">
                              <el-col :span="24">
                                  <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">添加</span>
                              </el-col>
                          </el-row>
                          <!-- 表单栏 -->
                          <el-row>
                            <el-col :span="16">
                              <avue-form ref="form" v-model="addForm" :option="addOption" class="yz-form"></avue-form>
                              <button class="check-btn rf" @click="yanzheng"><img src="../../assets/imgs/operation_btn_icon_yanzheng_default copy.png" alt="" class="btn-img">验证公式</button>
                            </el-col>
                            <el-col :span="8">
                              <div class="right-conta">
                                <div class="addRight">公式因子</div>
                                <div class="addRight">1 旅客站务费</div>
                                <div class="addRight">2 标准票价客运计算公式</div>
                                <div class="addRight">3 营运里程</div>
                                <div class="addRight">4 车型基价</div>
                              </div>
                              <button class="check-btn rf" @click="addWin=false">
                              <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                              <button class="check-btn rf custom-btn" @click="add"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                            </el-col>
                          </el-row>
                      </div>
                    </div>
                    <!-- 修改弹窗 -->
                    <div class="modal-win" v-show="modWin">
                      <div class="add-container">
                          <div class="closeWin" @click="modWin=false">X</div>
                          <!-- 标题栏 -->
                          <el-row class="add-title">
                              <el-col :span="24">
                                  <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">修改</span>
                              </el-col>
                          </el-row>
                          <!-- 表单栏 -->
                          <el-row>
                            <el-col :span="16">
                              <avue-form ref="form" v-model="modForm" :option="modOption" class="yz-form"></avue-form>
                              <button class="check-btn rf" @click="yanzheng"><img src="../../assets/imgs/operation_btn_icon_yanzheng_default copy.png" alt="" class="btn-img">验证公式</button>
                            </el-col>
                            <el-col :span="8">
                              <div class="right-conta">
                                <div class="addRight">公式因子</div>
                                <div class="addRight">1 旅客站务费</div>
                                <div class="addRight">2 标准票价客运计算公式</div>
                                <div class="addRight">3 营运里程</div>
                                <div class="addRight">4 车型基价</div>
                              </div>
                              <button class="check-btn rf" @click="modWin=false">
                              <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                              <button class="check-btn rf custom-btn" @click="mod"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                            </el-col>
                          </el-row>
                          
                      </div>
                    </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      activeTag: "3-3",
      customList: [
        {
           page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            highlightCurrentRow:true,
            column: []
          }
        }
      ],
      currentRow:"",
      addWin:false,
      addForm:{},
      addOption:{
        column:[
          {
            label:"名称",
            prop:"name",
            span:18
          },
          {
            label:"表达式",
            prop:"shizi",
            type:"textarea",
            span:18
          },
          {
            label:"备注",
            prop:"beizhu",
            type:"textarea",
            span:18
          },
        ]
      },
      modWin:false,
      modForm:{},
      modOption:{
        column:[
          {
            label:"名称",
            prop:"name",
            span:18
          },
          {
            label:"表达式",
            prop:"shizi",
            type:"textarea",
            span:18
          },
          {
            label:"备注",
            prop:"beizhu",
            type:"textarea",
            span:18
          },
        ]
      },
    };
  },
  methods: {
    customPage(val){
      this.customList[0].page.currentPage=val;
      this.refresh();
    },
    refresh() {
      this.customList[0].data = [];
      this.
        postRequest("/sch/bus/price/formula/list",{
          rows:this.customList[0].page.pageSize,
          page:this.customList[0].page.currentPage
        })
        .then(data => {
          console.log(data);
          this.customList[0].page.total=data.data.totalRow;
          this.customList[0].data=data.data.list;
        });
    },
    add() {
      this.$http
        .get(
          "/sch/bus/price/formula/add?priceFormula.id=&priceFormula.title="+this.addForm.name+"&priceFormula.remarks="+this.addForm.beizhu+"&priceFormula.exp="+this.addForm.shizi
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.refresh();
            this.addWin=false;
          } else {
            this.$message.error("验证失败！请检查");
          }
        });
    },
    del(){
        this.postRequest("/sch/bus/price/formula/del",{
          id:this.currentRow.id
        }).then((data)=>{
            if(data.data[0]==0){
                this.$message({
                    message:data.data[1],
                    type:"success"
                })
                this.refresh();
            }else{
                this.$message.error(data.data[1]);
            }
        });
    },
    mod(){
        this.getRequest("/sch/bus/price/formula/update?priceFormula.id="+this.currentRow.id+"&priceFormula.title="+this.modForm.name+"&priceFormula.remarks="+this.modForm.beizhu+"&priceFormula.exp="+this.modForm.shizi).then((data)=>{
            if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.refresh();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        })
    },
    yanzheng(){
      this.postRequest("/sch/bus/price/formula/isVaild",{
        exp:this.addForm.shizi
      }).then(data=>{
        if(data.data[0]==0){
           this.$message({
              message: '验证成功',
              type: 'success'
            });
        }else{
          this.$message.error('验证失败');
        }
      })
    },
    tableCreate() {
      this.customList[0].option.column.push(
        {
          label: "标题",
          prop: "title"
        },
        {
          label: "表达式",
          prop: "formula"
        },
        {
          label: "备注",
          prop: "remarks"
        },
      );
    },
    rowChange(val){
      console.log(val);
      this.currentRow=val;
      this.modForm.name=this.currentRow.title;
      this.modForm.shizi=this.currentRow.formula;
      this.modForm.beizhu=this.currentRow.remarks;
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("custom");
    this.tableCreate();
    this.refresh();
    this.$emit("sendActive", this.activeTag);
  }
};
</script>
<style scoped src="../../assets/css/service/custom.css">

</style>